<template>
  <div>
    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <template #header>
            <img src="@/assets/images/dashboard/day.png" class="w-[50px] h-[50px] rounded-xl">
          </template>
          <template #header-extra>
            <div class="text-lg">日</div>
          </template>

          <template #footer>
            <div class="pb-4 text-base">日活跃用户</div>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-lg">
                  <CountTo :startVal="1" :endVal="day_active.count" />
                </div>

                <div class="flex items-center">
                  <span :style="{ color: getTrendColor(day_active.trend) }" class="ml-1 text-sm">
                    {{ day_active.displayText }}
                  </span>
                  <n-icon v-if="day_active.trend === 'up'" :color="getTrendColor(day_active.trend)" size="16">
                    <ArrowUp />
                  </n-icon>
                  <n-icon v-else-if="day_active.trend === 'down'" :color="getTrendColor(day_active.trend)" size="16">
                    <ArrowDown />
                  </n-icon>
                  <n-icon v-else :color="getTrendColor(day_active.trend)" size="16">
                    <ArrowRightOutlined />
                  </n-icon>
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <template #header>
            <img src="@/assets/images/dashboard/dailyActive.png" class="w-[50px] h-[50px] rounded-xl">
          </template>
          <template #header-extra>
            <div class="text-lg">月</div>
          </template>

          <template #footer>
            <div class="pb-4 text-base">月活跃用户</div>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-lg">
                  <CountTo :startVal="1" :endVal="month_active.count" />
                </div>

                <div class="flex items-center">
                  <span :style="{ color: getTrendColor(month_active.trend) }" class="ml-1 text-sm">
                    {{ month_active.displayText }}
                  </span>
                  <n-icon v-if="month_active.trend === 'up'" :color="getTrendColor(month_active.trend)" size="16">
                    <ArrowUp />
                  </n-icon>
                  <n-icon v-else-if="month_active.trend === 'down'" :color="getTrendColor(month_active.trend)"
                    size="16">
                    <ArrowDown />
                  </n-icon>
                  <n-icon v-else :color="getTrendColor(month_active.trend)" size="16">
                    <ArrowRightOutlined />
                  </n-icon>
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <template #header>
            <img src="@/assets/images/dashboard/userNumber.png" class="w-[50px] h-[50px] rounded-xl">
          </template>
          <template #header-extra>
            <div class="text-lg">月</div>
          </template>

          <template #footer>
            <div class="pb-4 text-base">用户总数</div>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-lg">
                  <CountTo :startVal="1" :endVal="user_total.count" />
                </div>

                <div class="flex items-center">
                  <span :style="{ color: getTrendColor(user_total.trend) }" class="ml-1 text-sm">
                    {{ user_total.displayText }}
                  </span>
                  <n-icon v-if="user_total.trend === 'up'" :color="getTrendColor(user_total.trend)" size="16">
                    <ArrowUp />
                  </n-icon>
                  <n-icon v-else-if="user_total.trend === 'down'" :color="getTrendColor(user_total.trend)" size="16">
                    <ArrowDown />
                  </n-icon>
                  <n-icon v-else :color="getTrendColor(user_total.trend)" size="16">
                    <ArrowRightOutlined />
                  </n-icon>
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard :segmented="{ content: true, footer: true }" size="small" :bordered="false">
          <template #header>
            <img src="@/assets/images/dashboard/weekend.png" class="w-[50px] h-[50px] rounded-xl">
          </template>
          <template #header-extra>
            <div class="text-lg">周</div>
          </template>

          <template #footer>
            <div class="pb-4 text-base">招聘单总数</div>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-lg">
                  <CountTo :startVal="1" :endVal="job_total.count" />
                </div>

                <div class="flex items-center">
                  <span :style="{ color: getTrendColor(job_total.trend) }" class="ml-1 text-sm">
                    {{ job_total.displayText }}
                  </span>
                  <n-icon v-if="job_total.trend === 'up'" :color="getTrendColor(job_total.trend)" size="16">
                    <ArrowUp />
                  </n-icon>
                  <n-icon v-else-if="job_total.trend === 'down'" :color="getTrendColor(job_total.trend)" size="16">
                    <ArrowDown />
                  </n-icon>
                  <n-icon v-else :color="getTrendColor(job_total.trend)" size="16">
                    <ArrowRightOutlined />
                  </n-icon>
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
    </n-grid>

    <!--访问量 | 流量趋势-->
    <VisiTab v-if="!loading && Object.keys(chartData).length > 0" :chartData="chartData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getCount, getChart } from '@/api/dashboard/console';
import VisiTab from './components/VisiTab.vue';
import { CountTo } from '@/components/CountTo/index';
import { ArrowDown, ArrowUp } from "@vicons/ionicons5"
import { ArrowRightOutlined } from "@vicons/antd"
import { NIcon } from 'naive-ui';

interface InData {
  count: number;
  displayText: string;
  percent: number;
  statsType: string;
  trend: 'up' | 'down' | 'equal';
}

const loading = ref(true);
const day_active = ref<InData>({
  count: 0,
  displayText: '',
  percent: 0,
  statsType: '',
  trend: 'equal'
});
const month_active = ref<InData>({
  count: 0,
  displayText: '',
  percent: 0,
  statsType: '',
  trend: 'equal'
});
const user_total = ref<InData>({
  count: 0,
  displayText: '',
  percent: 0,
  statsType: '',
  trend: 'equal'
});
const job_total = ref<InData>({
  count: 0,
  displayText: '',
  percent: 0,
  statsType: '',
  trend: 'equal'
});
const chartData = ref({})

onMounted(async () => {
  try {
    const data = await getCount();
    chartData.value = await getChart();
    day_active.value = data[0];
    month_active.value = data[1];
    user_total.value = data[2];
    job_total.value = data[3];
  } catch (error) {
    console.error("Error fetching dashboard data:", error);
  } finally {
    loading.value = false;
  }
});

const getTrendColor = (trend: string) => {
  switch (trend) {
    case 'up':
      return '#18A058';
    case 'down':
      return '#D03050';
    case 'equal':
    default:
      return '#3D3D3D';
  }
};
</script>